<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">

<head>

<!-- Basic -->
<meta charset="UTF-8" />

<title>用户注册</title>

<!-- Mobile Metas -->
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!-- Import google fonts -->
<link
	href="http://fonts.useso.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light"
	rel="stylesheet" type="text/css" />

<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="<%=path%>/assets/ico/favicon.ico"
	type="image/x-icon" />
<link rel="apple-touch-icon"
	href="<%=path%>/assets/ico/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57"
	href="<%=path%>/assets/ico/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72"
	href="<%=path%>/assets/ico/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76"
	href="<%=path%>/assets/ico/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114"
	href="<%=path%>/assets/ico/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120"
	href="<%=path%>/assets/ico/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144"
	href="<%=path%>/assets/ico/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152"
	href="<%=path%>/assets/ico/apple-touch-icon-152x152.png" />

<!-- start: CSS file-->

<!-- Vendor CSS-->
<link href="<%=path%>/assets/vendor/bootstrap/css/bootstrap.min.css"
	rel="stylesheet" />
<link href="<%=path%>/assets/vendor/skycons/css/skycons.css"
	rel="stylesheet" />
<link
	href="<%=path%>/assets/vendor/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" />

<!-- Plugins CSS-->

<!-- Theme CSS -->
<link href="<%=path%>/assets/css/jquery.mmenu.css" rel="stylesheet" />

<!-- Page CSS -->
<link href="<%=path%>/assets/css/style.css" rel="stylesheet" />
<link href="<%=path%>/assets/css/add-ons.min.css" rel="stylesheet" />

<style>
footer {
	display: none;
}
</style>

<!-- end: CSS file-->


<!-- Head Libs -->
<script src="<%=path%>/assets/plugins/modernizr/js/modernizr.js"></script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->

<!-- 注册信息验证 -->
<script type="text/javascript">
	function register() {
		if (!checkname()) {
			return false;
		} else if (!checkpass()) {
			return false;
		} else if (!checkemail()) {
			return false;
		}
		return true;
	}
	function checkname()	
	{
	  var name = document.getElementById("uName").value;	
	  var ts = document.getElementById("namets");
	  if(name.length<3|| name.length>15)	
	  {	
	      ts.innerHTML ="用户名长度须在3-15之间!";
	      ts.style.color="red";
	      return false;
	  }
	  $.post("<%=path %>/user/checkUserExist", {" userName": name },function(data){
	    var d = $.parseJSON(data);
	    //console.log(d.success);
	    if(d.success!=true){
	      ts.innerHTML ='用户名已存在!';
	      ts.style.color='red';
	       return true;
	    }
	  });
	  ts.innerHTML ='用户名可以使用！';
	  ts.style.color='green';
	  return true;
	}
	function checkpass(){
	  var userPass = $("#uPass").val();
	  
	  var pts = document.getElementById("passts");
	  
	  if(userPass.length<6 || userPass.length >15)	
	  {	
	    pts.innerHTML ="密码长度须在6-15之间!";
	    pts.style.color="red";
	      return false;
	  }
	  pts.innerHTML ="密码可以使用!";
	  pts.style.color="green";
	  return true;
	}
	function checkrpass(){
	  var userPass = $("#uPass").val();
	  var userRPass = $("#uRPass").val();
	  var prts =  document.getElementById("passrts");
	  if (userPass != userRPass) {
	    prts.innerHTML="两次密码输入不一致!";
	    prts.style.color="red";
	    return false;
	  }
	  prts.innerHTML ="输入一致!";
	  prts.style.color="green";
	  return true;
	}
	function checkemail(){
	  var userEmail = $("#uEmail").val();
	  var ets = document.getElementById("emailts");
	  if(!isEmail(userEmail)){
	    ets.innerHTML ="邮箱格式不正确!";
	    ets.style.color="red";
	    return false;
	  } 
	  ets.innerHTML ="邮箱可以使用!";
	  ets.style.color="green";
	  return true;
	}
	function isEmail(str){
	    var reg = /[a-z0-9-]{1,30}@[a-z0-9-]{1,65}.[a-z]{3}/;
	    return reg.test(str);
	}
</script>
</head>

<body>
	<!-- Start: Content -->
	<div class="container-fluid content">
		<div class="row">
			<!-- Main Page -->
			<div class="body-register">
				<div class="center-register">
					<a href="#" class="logo pull-left hidden-xs"> <img
						src="<%=path%>/assets/img/logo.png" height="45" alt="NADHIF Admin" />
					</a>

					<div class="panel panel-register">
						<div class="panel-title-register text-right">
							<h2 class="title text-uppercase">
								<i class="fa fa-user"></i> Register
							</h2>
						</div>
						<div class="panel-body">
							<form action="<%=path%>/user/addUser" method="post"
								onsubmit="return register();">
								<table>
									<tr>
										<td
											style="text-align: right; width: 200px; line-height: 50px;">用
											户 名<font color="red">*</font>：
										</td>
										<td><input type="text" name="name"
											onblur="return checkname()" id="uName"
											style="width: 220px; font-size: 16px;" /></td>
										<td id="namets"
											style="width: 150px; height: 40px; text-align: left; font-size: 12px;"></td>
									</tr>
									<tr>
										<td style="text-align: right; line-height: 50px;">密 码<font
											color="red">*</font>：
										</td>
										<td><input type="password" id="uPass"
											name="password" onblur="return checkpass();"
											style="width: 220px; font-size: 16px;" /></td>
										<td id="passts"
											style="width: 150px; text-align: left; font-size: 12px;"></td>
									</tr>
									<tr>
										<td style="text-align: right; line-height: 50px;">确认密码<font
											color="red">*</font>：
										</td>
										<td><input type="password" name="" id="uRPass"
											onblur="return checkrpass();"
											style="width: 220px; font-size: 16px;" /></td>
										<td id="passrts"
											style="width: 150px; text-align: left; font-size: 12px;"></td>
									</tr>
									<tr>
										<td style="text-align: right; line-height: 50px;">邮 箱<font
											color="red">*</font>：
										</td>
										<td><input type="text" name="email" id="uEmail"
											onblur="return checkemail();"
											style="width: 220px; font-size: 16px;" /></td>
										<td id="emailts"
											style="width: 150px; text-align: left; font-size: 12px;"></td>
									</tr>
									<tr>
										<td></td>
										<td
											style="text-align: center; line-height: 55px; width: 220px"><input
											type="submit" value="注册"
											style="width: 60px; font-size: 16px;" /> <input type="reset"
											value="重置" style="width: 60px; font-size: 16px;" /></td>
									</tr>
								</table>
								<span style="color:red">${requestScope.error }</span>

								<div class="text-with-hr">
									<span>or use your another account</span>
								</div>
								<p class="text-center">
									Already have an account? <a href="<%=path%>/user/login"><small>Login!</small></a>
							</form>
						</div>
					</div>
				</div>
			</div>
			<!-- End Main Page -->

		</div>
	</div>
	<!--/container-->


	<!-- start: JavaScript-->

	<!-- Vendor JS-->
	<script src="<%=path%>/assets/vendor/js/jquery.min.js"></script>
	<script src="<%=path%>/assets/vendor/js/jquery-2.1.1.min.js"></script>
	<script src="<%=path%>/assets/vendor/js/jquery-migrate-1.2.1.min.js"></script>
	<script src="<%=path%>/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="<%=path%>/assets/vendor/skycons/js/skycons.js"></script>

	<!-- Plugins JS-->

	<!-- Theme JS -->
	<script src="<%=path%>/assets/js/jquery.mmenu.min.js"></script>
	<script src="<%=path%>/assets/js/core.min.js"></script>

	<!-- Pages JS -->
	<script src="<%=path%>/assets/js/pages/page-register.js"></script>

	<!-- end: JavaScript-->

</body>

</html>